<template>
  <div class="page2">
    <Row class="content">
      <Col span="24">
        <div class="list" style="height: 100%">
          <div class="left">
            <span class="angle1"></span>
            <span class="angle2"></span>
            <span class="angle3"></span>
            <span class="angle4"></span>
            <div class="chart-68">
              <jobList ref="chart3"></jobList>
            </div>
          </div>
        </div>
      </Col>
    </Row>
  </div>
</template>

<script>
import { yuceAnalysis, xialaAnalysis } from "@/api/page2Api";
const jobList = () => import("./components/page5/jobList");

export default {
  name: "page5",
  props: ["selectRangeDate"],
  components: {
    jobList,
  },
  data() {
    return {
      rData: [],
    };
  },
  methods: {
    getData() {
    //   xialaAnalysis().then((res) => {
    //     console.log(res);
    //   });
      //   fengquAnalysis().then((res1) => {
      //     this.rData = res1['分区'].map((it,index) => ({name:it,value:res1['平均薪资'][index]}))
      //   });
    },
  },
  mounted() {
    this.getData();
  },
};
</script>

<style lang="less" scoped>
.title {
  position: absolute;
  display: inline-block;
  color: #6eddf1;
  background: #14418e;
  left: 50%;
  transform: translate(-50%, -70%);
  font-size: 12px;
  .title-10 {
    // display: inline-block;
    padding: 2px 5px;
    // background: radial-gradient(4.75rem 0.9rem ellipse, rgba(7, 9, 34, .8) 60%, rgb(21, 67, 145));
  }
}
.page2 {
  height: 100%;
  width: 100%;
  padding: 14px 20px 20px;
  background: #03044a;
  overflow: hidden;

  .content {
    height: 100%;

    .ivu-col {
      height: 100%;
    }

    .circlePie {
      height: 100%;
      padding: 0 0 40px;
      text-align: center;
      position: relative;

      canvas {
        position: absolute;
        left: 50%;
        top: 0;
        transform: translate(-50%, 0);
      }

      #dot {
        background: rgba(0, 0, 0, 0);
      }
    }
    .center_list {
      height: 100%;
    }
    .list {
      height: 48%;

      .left,
      .right {
        background: #0d1341;
      }

      .left,
      .right,
      .center {
        width: 100%;
        height: 95%;
        border: 1px solid #0d2451;
        position: relative;

        #left1,
        #left2,
        #left3,
        #right1,
        #right2,
        #right3,
        #center2 {
          height: 100%;
        }

        .chart-68 {
          width: 100%;
          height: 100%;
          float: left;
        }

        .chart-32 {
          width: 32%;
          height: 100%;
          float: left;
        }
      }
    }
  }

  .bottom-list {
    height: 35%;

    .ivu-col {
      height: 100%;

      .list {
        height: 100%;
        width: 33.3333%;
        // padding-right: 1.5%;
        float: left;

        #bottom_4 {
          padding: 0 20px;
        }

        .bottom {
          width: 100%;
          height: 100%;
          border: 1px solid #0d2451;
          position: relative;
        }
      }

      .right-bottom {
        width: 100%;
        padding-right: 0;

        .bottom1 {
          width: 100%;
          .desc {
            padding: 30px 20px;
            color: #fff;
          }
        }
      }
    }
  }
}
</style>
